<template>
    <div class="commonWrap">
        <div class="100w row" style="margin: 5px 0">
            <div class="item col left">方案列表</div>
            <div class="item col right">
                <el-button type="primary" size="mini" @click="addPlan"
                    >添加</el-button
                >
            </div>
        </div>
        <el-table
            border
            stripe
            :header-cell-style="headerCellStyle"
            :data="tableData"
            style="width: 100%"
            size="small"
        >
            <el-table-column prop="schemeName" label="方案名"></el-table-column>
            <el-table-column prop="platformNames" label="经营类型">
            </el-table-column>
            <el-table-column prop="addServiceNames" label="服务">
            </el-table-column>
            <el-table-column prop="allCompany" label="是否适用所有商家">
                <template slot-scope="scope">
                    <div v-if="scope.row.allCompany === 1">是</div>
                    <div v-if="scope.row.allCompany === 0">否</div>
                </template>
            </el-table-column>
            <el-table-column prop="description" label="方案描述">
            </el-table-column>
            <el-table-column prop="status" label="状态">
                <template slot-scope="scope">
                    <div v-if="scope.row.status === 1">启用</div>
                    <div v-if="scope.row.status === 0">停用</div>
                </template>
            </el-table-column>
            <el-table-column prop="date" label="操作" width="220px">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        plain
                        @click="seePlan(scope.row)"
                        type="primary"
                        >查看
                    </el-button>
                    <el-button
                        size="mini"
                        plain
                        @click="editPlan(scope.row)"
                        type="primary"
                        >编辑
                    </el-button>

                    <!-- <el-button
                        size="mini"
                        plain
                        @click="deletePlan(scope.row)"
                        type="danger"
                        >删除
                    </el-button> -->
                </template>
            </el-table-column>
        </el-table>
        <div style="width: 100%; padding: 15px" class="column right">
            <el-pagination
                background
                :current-page.sync="currentPage"
                @current-change="handleCurrentChange"
                :page-size="pageSize"
                layout="prev, pager, next"
                :total="totalNum"
            ></el-pagination>
        </div>
        <addDialog
            :value.sync="showSet"
            :currRow="currRow"
            :currType="currType"
            @getList="getList"
        ></addDialog>
        <seeData :value.sync="showSee" :currRow="currRow"></seeData>
    </div>
</template>

<script type="text/ecmascript-6">
import addDialog from './components/addDialog'
import seeData from './components/seeData'
export default {
    components: {
        addDialog,
        seeData
    },
    data: function () {
        return {
            showSee: false,
            pageSize: 10,
            currentPage: 1,
            totalNum: 0,
            currType: 0,
            currRow: {},
            showSet: false, // 显示方案新增和编辑页面
            form: {
                agentName: this.$store.state.agentName,
                allCompany: 1, // 是否针对所有商家,0否1是
                name: '', // 方案名称
                state: 1, // 启用,停用
                token: this.$store.state.token, // 代理商token
                companyIDs: [], // 适用商家列表
                rechargeRuleRequests: [] // 充值规则列表
            },
            rules: {},
            tableData: []
        }
    },
    created () {
        this.getList()
    },
    methods: {
        handleCurrentChange (page) {
            // 换页
            this.currentPage = page
            this.getList()
        },
        addPlan () {
            this.currType = 0
            this.currRow = {}
            this.showSet = true
        },
        async getList () {
            let res = await this.$axios.post(this.$store.state.ip + '/server/agent/serverinfo/serviceList', {
                data: {
                    agentId: this.$store.state.loginParams.agentId,
                    page: this.currentPage - 1,
                    size: 10
                }
            })
            let response = res.data
            if (response.ret === '0') {
                this.tableData = response.data.list
                this.totalNum = response.data.total
            }
        },
        async deletePlan (item) {
            let res = await this.$fly.post(this.$store.state.url_sms + '/agentRecharge/deleteRechargeScheme', {
                data: {

                    agentName: this.$store.state.agentName,
                    token: this.$store.state.token,
                    id: item.rechargeSchemeID
                }
            })
            let response = res.data
            if (response.ret === '0') {
                this.getList()
            }
        },
        editPlan (item) {
            this.currRow = item
            this.showSet = true
        },
        seePlan (item) {
            this.currRow = item
            this.showSee = true
        }
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
@import '../../../../../static/css/variables'

.el-transfer-panel
    width: 300px

.formItem
    width: 200px
</style>